<template>
  <div>
     <TitHead tit='定位'><van-icon name="card" @click="rili"/></TitHead>
     <baidu-map class="map" :center="center" :zoom="zoom" @ready="handler" @click="clickEvent"> 
           <bm-geolocation anchor="BMAP_ANCHOR_BOTTOM_RIGHT" :showAddressBar="true" :autoLocation="true" @locationError='locationError' @locationSuccess='locationSuccess'></bm-geolocation> 
    </baidu-map>
    <div class="wz">当前位置：{{weizhi}}</div>
  </div>
</template>

<script>
import TitHead from '../../components/TitHead'
import Vue from 'vue'
import BaiduMap from 'vue-baidu-map'
Vue.use(BaiduMap, {
  // ak 是在百度地图开发者平台申请的密钥 详见 http://lbsyun.baidu.com/apiconsole/key */
  ak: '86UdP8hPkCWlH9L2ZlKeTkO1BBkEp6u3'
}) 
export default {
name:'Location',
components:{
    TitHead
},
data(){
    return{
        center: {lng: 0, lat: 0},
             zoom: 15,
             locData:{
                longitude:'',
                latitude:'',
                address:'',
                },
                weizhi:''
    }
},
methods:{
     rili(){
            this.$router.push('/calendar')
        },
        handler ({BMap, map}) {
            // console.log(BMap, map)
            // this.center.lng = 39.77784338659052 
            // this.center.lat = 116.56061626471465
            // this.zoom = 15


            let _this = this;  // 设置一个临时变量指向vue实例，因为在百度地图回调里使用this，指向的不是vue实例；
            let geolocation = new BMap.Geolocation();
            geolocation.getCurrentPosition(function(r){
                console.log(r);
                _this.center = {lng: r.longitude, lat: r.latitude};   // 设置center属性值
                _this.autoLocationPoint = {lng: r.longitude, lat: r.latitude};  // 自定义覆盖物
                _this.initLocation = true;
            },{enableHighAccuracy: true})
            window.map = map;
         },
         //点击地图监听
        clickEvent(e){
            map.clearOverlays();
            let Icon_0 = new BMap.Icon("http://api0.map.bdimg.com/images/marker_red_sprite.png", new BMap.Size(64, 64), {anchor: new BMap.Size(18, 32),imageSize: new BMap.Size(36, 25)});
            let myMarker = new BMap.Marker(new BMap.Point(e.point.lng, e.point.lat),{icon: Icon_0});
            map.addOverlay(myMarker);
            //用所定位的经纬度查找所在地省市街道等信息
            let point = new BMap.Point(e.point.lng, e.point.lat);
            let gc = new BMap.Geocoder();
            let _this = this;
            gc.getLocation(point, function (rs) {
                console.log(rs);
                let addComp = rs.addressComponents;
                _this.locData.address = rs.address;
                _this.weizhi=rs.address;

            });
            this.locData.longitude = e.point.lng;
            this.locData.latitude = e.point.lat;
            // console.log(e);
        },
         locationSuccess(point, AddressComponent, marker){
            //  console.log(point,AddressComponent);
             var weizhi=point.addressComponent.city+point.addressComponent.district+point.addressComponent.street+point.addressComponent.streetNumber
            //  console.log(weizhi);
            this.weizhi=weizhi
         },
         locationError(StatusCode){
            //  console.log(StatusCode);
         },
}
}
</script>

<style scoped>
.map {
   width: 100%;
  height: 300px;
  color: rgb(245, 245, 245);
}
.wz{
    padding: 0.6rem 0 0.4rem 0.2rem;
    font-size: 0.4rem;
    font-weight: bold;
    border-bottom: 1px solid #ccc;
}
</style>